<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <el-card>
      <el-tabs v-model="activeTab">
        <!-- 基本信息 -->
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <vehicleInfo />
          <!-- <el-form
            v-if="showForm"
            ref="form"
            :inline="true"
            class="demo-form-inline"
            :model="truckTypeDetail"
          >
            <el-form-item
              label="车辆编号"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.id }}</span>
            </el-form-item>
            <el-form-item
              label="车牌号码"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.licensePlate }}</span>
            </el-form-item>
            <el-form-item
              label="车型名称"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.truckTypeName }}</span>
            </el-form-item>
            <el-form-item
              label="车辆体积"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.allowableVolume }}</span>
            </el-form-item>
            <el-form-item
              label="车辆载重"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.allowableLoad }}</span>
            </el-form-item>
            <el-form-item
              label="GPSID"
              style="width: 25%;"
            >
              <span>{{ truckTypeDetail.deviceGpsId }}</span>
            </el-form-item>
            <el-form-item label="图片信息">
              <div class="demo-image__placeholder">
                <div class="block">
                  <el-image :src="pictures[0]"></el-image>
                  <el-image :src="pictures[1]"></el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-form-item>
                <el-button
                  type="danger"
                  @click="showForm = false"
                >编辑</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
          <el-form
            v-else
            ref="form"
            :inline="true"
            class="demo-form-inline"
            :model="truckTypeDetail"
          >
            <el-form-item label="车辆编号">
              <el-input
                v-model="truckTypeDetail.id"
                :disabled="true"
                placeholder="车辆编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="车牌号码">
              <el-input
                v-model="truckTypeDetail.licensePlate"
                placeholder="车牌号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="车型名称">
              <el-select
                v-model="truckTypeDetail.truckTypeName"
                placeholder="车型名称"
              >
              </el-select>
            </el-form-item>
            <el-form-item label="车辆体积">
              <el-input
                v-model="truckTypeDetail.allowableVolume"
                placeholder="车辆体积"
              ></el-input>
            </el-form-item>
            <el-form-item label="车辆载重">
              <el-input
                v-model="truckTypeDetail.allowableLoad"
                placeholder="车辆载重"
              ></el-input>
            </el-form-item>
            <el-form-item label="GPSID">
              <el-input
                v-model="truckTypeDetail.deviceGpsId"
                placeholder="GPSID"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片信息">
              <div class="demo-image__placeholder">
                <div class="block">
                  <el-image :src="pictures[0]"></el-image>
                  <el-image :src="pictures[1]"></el-image>
                </div></div></el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="upDataList"
              >保存</el-button>
              <el-button
                type="danger"
                plain
                @click="showForm = true"
              >取消</el-button>
            </el-form-item>
          </el-form> -->
        </el-tab-pane>
        <!-- 行驶证信息 -->
        <el-tab-pane
          label="行驶证信息"
          name="second"
        >
          <vehicleDrivingLicense />
          <!-- <el-form
            v-if="showEdit"
            label-width="100px"
            :inline="true"
            :model="truckTypeDrivingLicenseDetail"
          >
            <el-form-item
              label="行驶证号码"
              style="width: 25%;"
            >
              <span>{{
                truckTypeDrivingLicenseDetail.transportCertificateNumber
              }}</span>
            </el-form-item>
            <el-form-item
              label="发动机号码"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.engineNumber }}</span>
            </el-form-item>
            <el-form-item
              label="注册时间"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.registrationDate }}</span>
            </el-form-item>
            <el-form-item
              label="强制报废日期"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.mandatoryScrap }}</span>
            </el-form-item>
            <el-form-item
              label="整备质量"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.overallQuality }}</span>
            </el-form-item>
            <el-form-item
              label="检验有效期"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.expirationDate }}</span>
            </el-form-item>
            <el-form-item
              label="核定载质量"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.allowableWeight }}</span>
            </el-form-item>
            <el-form-item
              label="有效期"
              style="width: 25%;"
            >
              <span>{{ truckTypeDrivingLicenseDetail.validityPeriod }}</span>
            </el-form-item>
            <el-form-item label="图片信息">
              <div class="demo-image__placeholder">
                <div class="block">
                  <el-image :src="pictureJia[0]"></el-image>
                  <el-image :src="pictureJia[1]"></el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="showEdit = false"
              >编辑</el-button>
            </el-form-item>
          </el-form>
          <el-form
            v-else
            label-width="100px"
            :inline="true"
            :model="truckTypeDrivingLicenseDetail"
          >
            <el-form-item label="行驶证号码">
              <el-input
                v-model="
                  truckTypeDrivingLicenseDetail.transportCertificateNumber
                "
              ></el-input>
            </el-form-item>
            <el-form-item label="发动机号码">
              <el-input
                v-model="truckTypeDrivingLicenseDetail.engineNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-col :span="11">
                <el-date-picker
                  v-model="truckTypeDrivingLicenseDetail.registrationDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="强制报废日期">
              <el-col :span="11">
                <el-date-picker
                  v-model="truckTypeDrivingLicenseDetail.mandatoryScrap"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="整备质量">
              <el-input
                v-model="truckTypeDrivingLicenseDetail.overallQuality"
              ></el-input>
            </el-form-item>
            <el-form-item label="检验有效期">
              <el-col :span="11">
                <el-date-picker
                  v-model="truckTypeDrivingLicenseDetail.expirationDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="核定载质量">
              <el-input
                v-model="truckTypeDrivingLicenseDetail.allowableWeight"
              ></el-input>
            </el-form-item>
            <el-form-item label="有效期">
              <el-col :span="11">
                <el-date-picker
                  v-model="truckTypeDrivingLicenseDetail.validityPeriod"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="图片信息">
              <div class="demo-image__placeholder">
                <div class="block">
                  <el-image :src="pictureJia[0]"></el-image>
                  <el-image :src="pictureJia[1]"></el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="upDataTruckList"
              >保存</el-button>
              <el-button
                type="danger"
                plain
                @click="showEdit = true"
              >取消</el-button>
            </el-form-item>
          </el-form> -->
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// import {
//   truckTypeDetail,
//   truckTypeDrivingLicenseDetail,
//   truckTypeUpdate,
//   truckTypeDrivingLicense
// } from '@/api/transit'
import vehicleDrivingLicense from '@/views/transit/components/vehicle-driving-license.vue'
import vehicleInfo from '@/views/transit/components/vehicle-info.vue'
export default {
  components: {
    vehicleDrivingLicense,
    vehicleInfo
  },
  data() {
    return {
      //     form: {
      //       id: null
      //     },
      //     truckTypeDetail: {}, // 车辆信息
      //     truckTypeDrivingLicenseDetail: {}, // 行驶证信息
      activeTab: 'first'
      //     showForm: true,
      //     showEdit: true,
      //     pictures: [],
      //     pictureJia: []
    }
  },
  created() {
    // 接收传过来的id
    // this.form.id = this.$route.query.id
    // console.log(this.$route.query)
    // this.getTruckTypeDetail()
    // this.getTruckTypeDrivingLicenseDetail()
  }
  // methods: {
  //   // 通过id 调取接口 并接收数据
  //   async getTruckTypeDetail() {
  //     const { data } = await truckTypeDetail(this.form.id)
  //     this.truckTypeDetail = data
  //     this.pictures = this.truckTypeDetail.picture.split(',')
  //   },
  //   // 通过id 调取接口 并接收数据
  //   async getTruckTypeDrivingLicenseDetail() {
  //     const { data } = await truckTypeDrivingLicenseDetail(this.form.id)
  //     this.truckTypeDrivingLicenseDetail = data
  //     // 切割图片链接
  //     this.pictureJia = this.truckTypeDrivingLicenseDetail.picture.split(',')
  //   },
  //   // 点击编辑基本信息保存 ，上传数据，并重新渲染
  //   async upDataList() {
  //     await truckTypeUpdate(this.truckTypeDetail.id, this.truckTypeDetail)
  //     this.getTruckTypeDetail()
  //     this.showForm = true
  //     this.$message.success('修改成功')
  //   },
  //   // 点击编辑驾驶证信息保存
  //   async upDataTruckList() {
  //     await truckTypeDrivingLicense(this.truckTypeDrivingLicenseDetail.id, {
  //       ...this.truckTypeDrivingLicenseDetail,
  //       allowableWeight:
  //         this.truckTypeDrivingLicenseDetail.allowableWeight + '',
  //       outsideDimensions: ''
  //     })
  //     // this.getTruckTypeDrivingLicenseDetail()
  //     this.showEdit = true
  //     this.$message.success('修改驾驶证信息成功')
  //   }
  // }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
.el-input {
  width: 250px;
}
.el-form-item {
  margin-left: 50px;
}
</style>

<style lang="scss" scoped>
.vehicle-detail {
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
<style>
.el-input--prefix .el-input__inner {
  width: 250px;
}
</style>
